<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <button @click='fn'>暗( ఠൠఠ )ﾉ666</button>
        <button v-for='i in 5' @click='fn(i)'>按钮{{i}}</button>
        <button @click.once='fn(100,$event)'>按钮666</button>

        <div class="outer" @click.self='fn'>
          <div class="inner" @click='fn'></div>
        </div>

        <input type="text" @keydown='fn2' v-model='str'>
        <input type="text" @keydown.ct='fn3' v-model='str'>
        <input type="text" @keydown.13='fn3' v-model='str'>
        <input type="text" @keydown.enter='fn3' v-model='str'>
    </div>
</body>
</html>
<!-- 
    v-on:事件名 = ‘函数名’  简写 @
    @click='fn'  fn(e){e 就是而我们事件对象}
    @click='fn()'  fn(){ 一个实参都没有}
    @click='fn(1,2,3,4)'  fn(){ 4个实参 分别对应  1 2 3 4}
    @click='fn($event,1,2,3,$event,4,$event)'  fn(){ $event 就是事件对象 词是vue规定的}

    事件修饰符
    @click.stop = 'fn'  阻止冒泡
    @click.prevent = 'fn' 阻止默认

    .passive  控制先执行默认还是先执行绑定的事件 就是2级事件绑定的第三个参数（对象中的属性）

    //按键修饰符
    @keydown.enter='fn'
    Vue.config.keyCodes.qqq = 17 // 自定义按键修饰符

 -->
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    Vue.config.keyCodes.ct = 17
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            str:'',
            // fn(){
            //   console.log(this)// this不是当前实例
            //   console.log(6666)
            // }
        },
        methods: {
          // 这里的属性 也会被挂在到当前实例上 ； 这里的属性 不能跟data中的重复
          // 这里的属性 不能是箭头函数
          fn(e){
            // 这些函数中的this都是当前实例；
            console.log(arguments)
            console.log(666)
            this.name = 909099
          },
          fn2(e){
            console.log(e.keyCode)
            if(e.keyCode==13){
              console.log(this.str)
            }
          },
          fn3(){
            console.log(this.str)
          }
        },
    });
</script>